<template>
  <view class="page">
    <!-- #ifndef MP-WEIXIN -->
    <my-navbar
      title="菜谱下单"
      color="#000"
      leftText=""
      @leftClick="back"
      background="#ffffff"
    ></my-navbar>
    <!-- #endif -->
    <view class="content">
      <!-- 菜谱信息 -->
      <view class="recipe-container recipe-info">
        <view class="recipe-info-name flex-btw bottom-border">
          <text class="title">菜谱</text>
          <text class="value">{{ info.name }}</text>
        </view>
        <view class="recipe-info-date flex-btw bottom-border">
          <text class="title">就餐日期</text>
          <text class="value">{{ formattedDateRange }}</text>
        </view>
        <view class="recipe-info-remark flex-middle">
          <u-input v-model="remark" placeholder="请输入备注" />
        </view>
      </view>
      <!-- 菜单日期 -->
      <view class="recipe-container recipe-date">
        <view class="tabs bottom-border">
          <u-tabs
            :list="info.packageMenuList"
            :current="current"
            @change="change"
            name="week"
            active-color="#40AE36"
            bar-width="48"
            bar-height="4"
          ></u-tabs>
        </view>
        <view class="recipe-datetime flex-btw">
          <text class="title">配送日期</text>
          <text class="value">{{ currentItem.send_at }}</text>
        </view>
      </view>
      <!-- 数量选择 -->
      <view class="recipe-container recipe-num flex-btw">
        <text>数量</text>
        <my-stepper
          :val="currentItem.num"
          @plus="addAction(currentItem)"
          @minus="subAction(currentItem)"
          @showKey="$refs.keyboard.open"
        ></my-stepper>
      </view>
      <!-- 菜品列表 -->
      <view class="recipe-container recipe-goods">
        <recipe-goodsitem
          class="recipe-goods-item"
          v-for="(item, index) in currentItem.data"
          :key="index"
          :item="item"
          :index="index"
          @toggleSelection="toggleSelection"
        ></recipe-goodsitem>
      </view>
    </view>
    <!-- 结算按钮 -->
    <view class="footer-height"></view>
    <view class="footer">
      <view class="button" @click="toSettle">去结算</view>
    </view>
    <my-keyboard ref="keyboard" @confirm="inputPrice"></my-keyboard>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
import recipeGoodsitem from "./recipeGoodsitem.vue";
export default {
  components: {
    recipeGoodsitem,
  },
  data() {
    return {
      info: {
        date_range: [], // 日期范围
        name: "", // 菜谱名称
        packageMenuList: [], // 菜谱列表
      },
      remark: "", // 备注
      current: 0, // 当前选项索引
      num: 0, // 数量
      goodsId: "",
    };
  },
  onLoad(option) {
    this.num = option.num; // 初始化数量
    this.goodsId = option.id;
    this.getData(option.id); // 获取数据
  },
  computed: {
    // 当前菜单项
    currentItem() {
      return this.info.packageMenuList[this.current] || {};
    },
    // 格式化日期范围
    formattedDateRange() {
      return this.info.date_range.join(" 至 ");
    },
  },
  methods: {
    getData(id) {
      $https("GET", "info", { id }, (res) => {
        if (res.data.errcode == 0) {
          let { packageMenuList, ...data } = res.data.data;
          this.info = {
            ...data,
            packageMenuList: packageMenuList.map((item) => ({
              num: this.num,
              ...item,
            })),
          };
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },
    change(index) {
      this.current = index;
    },
    // 去结算
    toSettle() {
      let obj = {
        id: this.goodsId,
        order_num_arr: JSON.stringify(
          this.info.packageMenuList.map((el) => {
            return {
              num: el.num,
              id: el.id,
            };
          })
        ),
      };
      uni.navigateTo({
        url: `/subpack/recipe/submitorder?goodsData=${JSON.stringify(obj)}&remark=${this.remark}`,
      });
    },
    // 修改展开状态
    toggleSelection(data) {
      let { value, index } = data;
      this.currentItem.data[index].is_select = value;
    },
    // 返回
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // +
    addAction(currentItem) {
      currentItem.num++;
    },
    // -
    subAction(currentItem) {
      currentItem.num = Math.max(currentItem.num - 1, 1);
    },
    //输入数量
    inputPrice(data) {
      this.currentItem.num = Math.max(data.value, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 0 30rpx;
}
.recipe-container {
  padding: 0 30rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
}
.recipe-info {
  margin-top: 20rpx;
  & > view {
    height: 110rpx;
  }
  .recipe-info-name,
  .recipe-info-date {
    text {
      font-family: PingFang SC;
      font-size: 30rpx;
      color: #000000;
      &.title {
        color: rgba(1, 1, 1, 0.95);
      }

      &.value {
        font-weight: bold;
      }
    }
  }
  /deep/.u-input {
    width: 100%;
    height: 70rpx;
    font-size: 30rpx;
  }
}
.recipe-date {
  margin-top: 10rpx;
  .tabs {
    height: 110rpx;
    /deep/.u-tab-item {
      height: 100rpx !important;
      line-height: 100rpx !important;
      padding: 0 !important;
      margin-right: 85rpx;
      &:nth-last-child(2) {
        margin-right: 0 !important;
      }
    }
    /deep/.u-tab-bar {
      bottom: -4rpx;
    }
  }
  .recipe-datetime {
    height: 110rpx;
    text {
      font-family: PingFang SC;
      font-size: 30rpx;
      color: #000000;
      &.title {
        color: rgba(1, 1, 1, 0.95);
      }

      &.value {
        font-weight: bold;
      }
    }
  }
}
.recipe-num {
  margin-top: 10rpx;
  height: 110rpx;
}
.recipe-goods {
  margin: 10rpx 0 40rpx;
  padding: 20rpx 30rpx;
  /deep/.recipe-goods-item:last-child {
    .recipe-goods-items {
      margin-bottom: 0 !important;
    }
    .goods-info {
      padding-bottom: 0 !important;
      border-bottom: 0 !important;
    }
  }
}
.footer-height {
  height: 130rpx;
}
.footer {
  position: fixed;
  bottom: 0;
  height: 130rpx;
  padding: 20rpx 60rpx;
  background-color: #ffffff;
  z-index: 100;
  .button {
    width: 630rpx;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background: #40ae36;
    border-radius: 45rpx;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 30rpx;
    color: #ffffff;
  }
}
.bottom-border {
  border-bottom: 1px solid #ececec;
}
</style>
